<template>
    <div>
        <div style="display:flex;justify-content:space-between;height:62px;background-color:#545c64;min-width:60%;width:100%">
            <div style="line-height:62px;
                        color:#fff;margin-left:5px;font-weight:500">
                <span style="font-size:20px">庆哥-网上商城演示系统1.0版本</span>
            </div>
            <div style="width:45%">
                <el-menu text-color="#fff" :router="true" 
                        mode="horizontal" background-color="#545c64"
                        active-text-color="#ffd04b" style="border-bottom:2px solid #545c64"
                        :default-active="$router.currentRoute.path">   
                    <el-menu-item class="el-menu-item" 
                        v-for="(item, index) in arr" :key="index"  @click="path(index)"
                        :index="item.path">
                            {{item.name}}
                    </el-menu-item>
                </el-menu>
            </div>
			
            <div style="display:flex;justify-content:space-between;height:100%;">
                <div class="block" style="margin:10px;">
                    <span @click="setUserInfo()">
                        <el-avatar :size="40" :src="$store.state.img"></el-avatar>
                    </span>
                    <el-link style="color:white;" 
                            @click="dialogFormVisible=true" :underline="false">
                        {{$store.state.condition}}
                    </el-link>
                    <el-dialog title="登录" :visible.sync="dialogFormVisible" width="25%" center >
                        <el-input  style="margin-bottom:20px" placeholder="请输入内容" v-model="user.username">
                        <template slot="prepend">账号</template>
                        </el-input>
                        <el-input  placeholder="请输入内容" v-model="user.password">
                            <template slot="prepend">密码</template>
                        </el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button  @click="dialogFormVisible = false">取 消</el-button>
                            <el-button  type="primary" @click="doLogin();dialogFormVisible=false">登 录</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
            <div style="margin: 0 50px">
                <el-link
                @click="register()" style="color:white;line-height:62px;margin-right:30px" :underline="false">
                    注册
                </el-link>
                <el-link v-if="$store.state.isLogin"
                @click="back()"  style="color:white;line-height:62px" :underline="false">
                    退出
                </el-link>
            </div>
        </div>
        
        <div style="display:flex;">
            <router-view></router-view>
        </div>
        
        <div class="aaa">
            <el-button size="mini"> <el-link href="#" :underline="false">顶 部</el-link></el-button>
        </div>

    </div>
</template>
<script>
    export default {
        name: "Fore",
        props: [],
        data() {
            return {
                user: {
					grant_type: 'password',
					client_id: 'sobook',
					client_secret: '223344',
					username: '',
					password: ''
				},
                dialogFormVisible:false,
                arr:[
                    {path:"/fore/home/home",name:"主页"},
                    {path:"/fore/details/details",name:"商品详情"},
                    {path:"/fore/cart/cart",name:"购物车"},
                    {path:"/fore/order/order",name:"我的订单"},
                ],
                circleUrl:"",
            };
        },
        methods: {
            register(){
                this.$router.push({path : "/fore/Register"})
            },
            setUserInfo(){
                if(!this.$store.state.isLogin){
                    this.dialogFormVisible = true;
                    return
                }
                this.$router.push({path : "/fore/UserInfo"})
            },
            path(idx){
                if(!this.$store.state.isLogin){
                    if(this.arr[idx].name == "购物车" || this.arr[idx].name == "我的订单"){
                        this.$router.push({path : "/"})
                        this.$message.error('未登录');
                    }
                }
            },
            doLogin() {
                let that = this;
                this.$postX("/oauth/token", that.user).then(
                    function(resp) {
                        that.$store.commit('$_setToken',resp.data.access_token);
                        //在发送一次请求
                        that.$get("/api/public/getUser").then(
                            function(resp) {
                                that.$store.commit('$_setUser',resp.data);
                                var str = resp.data.role
                                if(str.indexOf("G")>=0){
                                    that.$router.push({path : "/adm"})
                                }
                                that.$message({
                                    message: '登陆成功',
                                    type: 'success'
                                });
                            }
                        )
                    }
                )

			},
            back(){
                this.$store.commit('$_removeStorage');
                if(!this.$store.state.isLogin){
                    this.$message({
                        message: '已退出',
                        type: 'success'
                    });
                }
                if(this.$route.path!="/home"){
                    this.$router.push({path : "/home"})
                }
            }
        },
        mounted() {
        }
    };
</script>
<style scoped="scoped">
    .el-menu-item{
        padding: 0 40px;
        line-height: 60px;
    }
    .nav{
        position:fixed;
        top:0;
        left:0;
        z-index: 50;
    }
    
    .aaa{
        position:fixed;
        top: 80%;
        right: 0;
        z-index: 10;
    }
</style>
